<!-- 回到顶部 -->
<template>
  <div>
    <div class="box_ce clearBoth">
      <ul class="clearBoth">
        <li>
          <div class="biao_ce"></div>
          <div class="displayBox">
            电话：010-86398533
          </div>
        </li>
        <li>
          <div class="biao_ce"></div>
        </li>
        <li v-show="tops"
            @click="cliTop">
          <div class="biao_ce"></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      tops: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll (e) {
      // 方法一
      var top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset)
      if (top > 1) {
        this.tops = true
      } else {
        this.tops = false
      }
    },
    cliTop () {
      var top = Math.floor(document.body.scrollTop || document.documentElement.scrollTop || window.pageXOffset)
      const timeTop = setInterval(() => {
        document.body.scrollTop = document.documentElement.scrollTop = top -= 50
        if (top <= 0) {
          clearInterval(timeTop)
        }
      }, 1)
    }
  }
}
</script>
<style lang="less" scoped>
.box_ce {
  position: fixed;
  top: 50%;
  right: 15px;
  z-index: 1000;
  transform: translateY(-50%);
  ul {
    li {
      width: 59px;
      height: 61px;
      background: #343433;
      transition: 0.3s all;
      cursor: pointer;
      position: relative;
      .biao_ce {
        width: 100%;
        height: 100%;
      }
      .displayBox {
        display: none;
        width: 150px;
        line-height: 61px;
        padding-left: 18px;
        position: absolute;
        top: 0;
        right: 0;
        background: #e7eaf0;
        transition: 0.3s all;
      }
    }
    li:nth-child(1) .biao_ce {
      background: url("../../assets/phone_c_03.png");
    }
    li:nth-child(2) .biao_ce {
      background: url("../../assets/kef_c_03.png");
    }
    li:last-child {
      background: #fff;
      .biao_ce {
        background: url("../../assets/top_c_03.png");
      }
    }
    li:nth-child(1):hover,
    li:nth-child(2):hover {
      background: #007fff;
      .displayBox {
        display: block;
        right: 100%;
      }
    }
  }
}
</style>
